<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家订单信息</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<!--
单页应用， 所有功能集成在当前页面
一般对数据的操作就是  增，删，改，查
1   打开该页时自动访问后端controller得到列表数据【查】
2   点击具体按钮时访问后端controller 执行操作【增，删，改】
3   利用DOM（不刷新页面修改页面局部内容）
4   利用异步网络请求ajax（不刷新页面在浏览器后台发送HTTP请求）
-->
<h1 style="text-align: center">商家订单信息展示</h1>
<div id="Orderinf" >
    <table class="table table-primary table-layout:fixed table-hover table-striped">
        <thead>
        <tr>
            <th>订单号</th>
            <th>顾客号</th>
            <th>顾客名</th>
            <th>顾客地址</th>
            <th>顾客电话</th>
            <th>餐馆老板</th>
            <th>总价格</th>
            <!--      <th>菜品号</th>-->
            <th>菜名1</th>
            <!--      <th>菜品号</th>-->
            <th>菜名2</th>
            <!--      <th>菜品号</th>-->
            <th>菜名3</th>
            <th>菜名4</th>
            <th>菜名5</th>
            <th>菜名6</th>
            <th>菜名7</th>
            <th>菜名8</th>
            <th>菜名9</th>
            <th>菜名10</th>
            <th>菜名11</th>
        </tr>
        </thead>
        <tbody id="display">
        <tr>

        </tr>
        </tbody>
    </table>


</div>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>

<script>
    //页面加载时
    $(document).ready(function () {
        //访问所有商家数据
        // var cid = window.location.search.substring(1);
        var rid = window.location.href.split("=")[1];
        console.log(rid);
        $.ajax({
            url:"orderinf/restaurantcheckorderinf",
            data:{rid:rid},
            type:"GET",
            dataType:"json",
            success:function(ret){
                console.log(ret);
                //将数据渲染到页面中
                $("#display").empty();//先清空原始内容
                let orders = ret.dataZone.orderlist;
                //开始循环遍历
                $.each(orders,function(index,item){
                    //遍历一次创建一个行
                    var rTr = $("<tr></tr>");
                    //依次构建单元格td

                    var oidTd = $('<td></td>').text(item.oid);
                    var ocustomeridTd = $('<td></td>').text(item.customer.cid);
                    var cusernameTd = $('<td></td>').text(item.customer.cusername);
                    var caddressTd = $('<td></td>').text(item.customer.caddress);
                    var cphoneTd = $('<td></td>').text(item.customer.cphone);
                    //var orestaurantidTd = $('<td></td>').text(item.resaurant.rid);
                    var rusernameTd = $('<td></td>').text(item.restaurant.rusername);
                    var ototalvalueTd = $('<td></td>').text(item.ototalvalue);
                    rTr.append(oidTd).append(ocustomeridTd).append(cusernameTd).append(caddressTd).append(cphoneTd).append(rusernameTd).append(ototalvalueTd)
                    i=0;
                    $.each(item.dishess,function (index1,item1){
                        var dnameTd = $('<td></td>').text(item.dishess[i].dname);
                        i=i+1;
                        rTr.append(dnameTd)
                    });
                    //var didTd = $('<td></td>').text(item.dishess[0].did);
                    //var dnameTd = $('<td></td>').text(item.dishess[0].dname);
                    //var did1Td = $('<td></td>').text(item.dishess[1].did);
                    //var dname1Td = $('<td></td>').text(item.dishess[1].dname);
                    //var did2Td = $('<td></td>').text(item.dishess[2].did);
                    //var dname2Td = $('<td></td>').text(item.dishess[2].dname);
                    //var dname3Td = $('<td></td>').text(item.dishess[3].dname);
                    //rTr/*.append(didTd)*/.append(dnameTd)./*append(did1Td).*/append(dname1Td)./*append(did2Td).*/append(dname2Td).append(dname3Td)


                    //每次循环将创建的td追加到tr中
                    /*.append(orestaurantidTd)*/

                    //每次循环将创建的tr追加到tbody中
                    $("#display").append(rTr); // 每次修改前端页面都需要重启服务器太浪费时间， 可以考虑热部署
                });

            },
            error:function (eno){
                console.log(eno);
            }
        });
    });

</script>

</body>
</html>